<template>
	<!-- <page-meta>
        <navigation-bar :back="false" :search="true"></navigation-bar><navigation-bar :back="false" :search="true"></navigation-bar>
    </page-meta> -->
	<view>
		<navigation-bar :back="false" :search="true"></navigation-bar>
		<view class="h1" style="padding: 0; padding-top: 30rpx; overflow-x: hidden">
			<view class="h2">
				<view class="h3" v-for="(item, index) in swiperGame" :key="index">
					<view class="h4">
						<image :src="item.banner" mode="" class="h5" />
						<view class="h6">
							<view class="h7">
								<view class="h8">{{ item.appname }}</view>
								<view class="h9">{{ item.briefIntro }}</view>
							</view>
							<view class="h10" @tap="goToGame" :data-data="item">开始游戏</view>
						</view>
					</view>
				</view>
			</view>

			<view class="sqi1 h14">
				<view class="sqi2" @tap="goToForum" data-data="1">
					<view class="sqi3 sqi3-1">
						<image src="/static/images/homeIcon1.png" class="sqi4"></image>
					</view>
					<view class="sqi5">热游圈</view>
				</view>
				<view class="sqi2" @tap="goToForum" data-data="2">
					<view class="sqi3 sqi3-2">
						<image src="/static/images/homeIcon2.png" class="sqi4"></image>
					</view>
					<view class="sqi5">新游圈</view>
				</view>
				<view class="sqi2" @tap="goToForum" data-data="3">
					<view class="sqi3 sqi3-3">
						<image src="/static/images/homeIcon3.png" class="sqi4"></image>
					</view>
					<view class="sqi5">好游圈</view>
				</view>
				<view class="sqi2" @tap="goToForum" data-data="4">
					<view class="sqi3 sqi3-4">
						<image src="/static/images/homeIcon4.png" class="sqi4"></image>
					</view>
					<view class="sqi5">吐槽圈</view>
				</view>
			</view>

			<view class="h1" style="padding-top: 0">
				<view class="h11">
					<view class="h12">猜你喜欢</view>
					<view class="h13" @tap="goToAll" data-data="2">查看全部</view>
				</view>

				<view class="h19">
					<view class="h20" v-for="(item, index) in cainiGame" :key="index">
						<view class="h21">
							<image :src="item.logoSquare" class="h17"></image>
							<view class="h18">{{ item.appname }}</view>
						</view>

						<view class="h22" @tap="goToGame" :data-data="item">秒玩</view>
					</view>
				</view>

				<!-- <view class="h11">
					<view class="h12">最新圈子</view>
					<view class="h13" @tap="goToAll" data-data="2">查看全部</view>
				</view> -->
				<view @tap="goToForumDetail" :data-data="item" v-for="(item, index) in forumData" :key="index">
					<view class="qz1">
						<view class="qz2">
							<view class="qz3">
								<view class="qz4">
									<image class="qz5" :src="item.head"></image>
								</view>
								<view class="qz6">
									<view class="qz7">{{ item.name }}</view>
									<view class="qz8">
										<view class="qz9">{{ item.createTime }}</view>
										<view class="qz10">{{ item.gamename }}</view>
									</view>
								</view>
							</view>
							<view class="qz11">
								<image src="/static/images/qz1.png"></image>
							</view>
						</view>
						<view class="qz12">{{ item.title }}</view>
						<view class="qz13">{{ item.content }}</view>
						<view class="qz14" v-if="item.image && item.image.length > 0">
							<view class="qz15" v-for="(urls, index1) in item.image" :key="index1">
								<image :src="urls" mode="aspectFill"></image>
							</view>
						</view>
						<view class="qz16">
							<view class="qz17">{{ item.createTime }}</view>
							<view class="qz18">#{{ item.tag1 }}</view>
							<view class="qz18">#{{ item.tag2 }}</view>
						</view>
						<view class="qz19">
							<view class="qz20">
								<image src="/static/images/qz4.png" class="qz22"></image>
								<view class="qz23">{{ item.num1 }}</view>
							</view>
							<view class="qz21">
								<view class="qz20">
									<image src="/static/images/qz2.png" class="qz22"></image>
									<view class="qz23">{{ item.num2 }}</view>
								</view>
								<view class="qz20" style="margin-left: 40rpx">
									<image src="/static/images/qz3.png" class="qz22"></image>
									<view class="qz23">{{ item.num3 }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="h11">
					<view class="h12">热门推荐</view>
					<view class="h13" @tap="goToAll" data-data="3">查看全部</view>
				</view>
				<view class="h23">
					<view style="width: calc(50%); display: flex" v-for="(item, index) in hotGame" :key="index">
						<view class="h24" @tap="goToGame" :data-data="item">
							<view>
								<image :src="item.logoSquare" class="h17"></image>
							</view>
							<view class="h25">
								<view class="h26">{{ item.appname }}</view>
								<view class="h27">{{ item.briefIntro }}</view>
							</view>
						</view>

						<view style="width: 30rpx" v-if="index % 2 == 0"></view>
					</view>
				</view>

				<view class="h11">
					<view class="h12">我的游戏</view>
					<view class="h13" @tap="goToAll" data-data="1">查看全部</view>
				</view>

				<view class="h14">
					<view class="h15" v-if="myGame.length != 0">
						<view class="h16" @tap="goToGame" :data-data="item" v-for="(item, index) in myGame"
							:key="index">
							<image :src="item.logo" class="h17"></image>
							<view class="h18">{{ item.appname }}</view>
						</view>
					</view>
					<view v-if="loginStatus == false" style="text-align: center; color: lightgray; line-height: 90rpx" @tap="handleLoginConfirm">
						登录后查看，点击前往登录~</view>
					<view v-else-if="myGame.length == 0" style="text-align: center; color: lightgray; line-height: 90rpx">
						暂无玩过的游戏</view>
				</view>
				<view style="height: 100rpx"></view>
			</view>
		</view>

		<!-- 添加自定义登录提示框 -->
		<CustomConfirm
			:visible.sync="showLoginConfirm"
			title="温馨提示"
			content="亲，您还没登录，请先登录~"
			@confirm="handleLoginConfirm"
			@cancel="handleLoginCancel"
		/>
	</view>
</template>

<script>
import navigationBar from '../../components/navigation-bar/navigation-bar.vue';
import {
	getGame,
	addClick,
	addOpen,
	getForum
} from '../../api/getApi';
import CustomConfirm from '../../components/CustomConfirm/CustomConfirm.vue';
import loginStatusUtils from '../../utils/loginStatusUtils';
import globalStore from '../../store/global';
import { updateMyViewTabBarText } from '../../utils/tabBarUtils';
import{
	addMyGame
} from '../../api/userGameApi';
import { getMyGameDetail } from '../../api/userGameApi';

export default {
	components: {
		navigationBar,
		CustomConfirm
	},
	data() {
		return {
			loginStatus: globalStore.getLoginStype(),
			swiperGame: [],
			cainiGame: [],
			hotGame: [],
			forumData: [],
			myGame: [],
			urls: [],
			sweixin: null,
			url: 'https://game.weixin.qq.com/cgi-bin/comm/openlink?auth_appid=wx62d9035fd4fd2059&url=https%3A%2F%2Fgame.weixin.qq.com%2Fcgi-bin%2Fminigame%2Fstatic%2Fcps-transfer%2Findex.html%3Ft%3DAARwtQwFAAABAAAAAACb5dZ3Bq27t3udXwPJZxAAAADA8RG5WEKQmoqKviNESI_t_xpcTGNZbOvZhGLbF_si_gri_9qdvru4eA8jre-QDluA9gJxhZESxT4o%26wechat_pkgid%3Dminigame__cps_transfer_index',
			showLoginConfirm: false,//登录提示框是否显示
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {

			getGame({
				page: 1,
				limit: 10,
				randomGame: 'true'
			}).then((res) => {
				this.setData({
					cainiGame: res.data.list
				});
				console.log(res);
			});
		getForum({
			page: 1,
			limit: 5,
			randomGame: 'true'
		}).then((res) => {
			res.data.list.forEach((element) => {
				if (element.image) {
					element.image = element.image.split(',');
				}
			});
			this.setData({
				forumData: res.list
			});
		});
		getGame({
			page: 1,
			limit: 10,
			randomGame: 'true',
			bannerGame: 'true'
		}).then((res) => {
			const list = res.data.list;
			if (list && list.length > 0) {
				this.setData({
					swiperGame: list.slice(0, 5)
				});
				this.setData({
					hotGame: list.slice(5, 9)
				});
			}
		});
		updateMyViewTabBarText();	
		//获取我的游戏
		this.getMyGame();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {
		// 更新TabBar文本
		
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() { },
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() { },
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {
		// getGame({
		// 	page: 1,
		// 	limit: 10,
		// 	randomGame: 'true'
		// }).then((res) => {
		// 	this.setData({
		// 		cainiGame: res.data.list
		// 	});
		// 	console.log(res);
		// });
		// promises.push(promise1);
		
		// 创建Promise数组来跟踪所有请求
		const promises = [];
		
		// 第一个请求
		const promise1 = getGame({
			page: 1,
			limit: 10,
			randomGame: 'true'
		}).then((res) => {
			this.setData({
				cainiGame: res.data.list
			});
			console.log(res);
		});
		promises.push(promise1);

		// 第二个请求
		const promise2 = getGame({
			page: 1,
			limit: 10,
			randomGame: 'true',
			bannerGame: 'true'
		}).then((res) => {
			const list = res.data.list;
			if (list && list.length > 0) {
				this.setData({
					swiperGame: list.slice(0, 5)
				});
				this.setData({
					hotGame: list.slice(5, 9)
				});
			}
		});
		promises.push(promise2);
		
		// 等待所有请求完成
		Promise.all(promises).then(() => {
			// 加载本地存储数据
			let myGame = uni.getStorageSync('myGame');
			if (!myGame) {
				myGame = [];
			} else {
				myGame = JSON.parse(myGame).slice(0, 20);
			}
			this.setData({
				myGame: myGame
			});
			
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		}).catch(error => {
			console.error('刷新数据出错:', error);
			// 即使出错也要停止刷新动画
			uni.stopPullDownRefresh();
		});
	},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() { },
	/**
	 * 用户点击右上角分享
	 */
	// 移除onShareAppMessage方法
	methods: {

		getMyGame() {
			getMyGameDetail().then(res => {
				// console.log("获取我的游戏",res);
				this.setData({
					myGame: res.data.list
				});
			});
		},
		// 移除getPlus方法



		goToGame(e) {
			// 检查登录状态
			if (!loginStatusUtils.checkLoginAndShowConfirm(this)) {
				return;
			}
			let itemdata = e.currentTarget.dataset.data;
			let loginType = 'app';
		
			//加入我的游戏
			addMyGame({
				kyyGameId:itemdata.id,
				kyyGameAppname:itemdata.appname,
				kyyGameLogo:itemdata.logo,
				kyyGameUrl:itemdata.gameUrl
			}).then(res => {
				console.log('成功加入我的游戏',res);
			});

			//处于微信端时
			if (itemdata.appid && loginType === 'weixin') {
				uni.navigateToMiniProgram({
					appId: itemdata.appid,
					path: '?wxgamepro=CpsCBgAAoXkpQY9UXS9__OwV',
					envVersion: 'release',
					success: (res) => {
						let myGame = uni.getStorageSync('myGame');
						if (!myGame) {
							myGame = [];
						} else {
							myGame = JSON.parse(myGame).slice(0, 300);
						}
						if (!myGame.find((v) => v.id === itemdata.id)) {
							myGame = [itemdata, ...myGame];
						}
						uni.setStorageSync('myGame', JSON.stringify(myGame));
						this.setData({
							myGame: myGame
						});
						addOpen({
							id: itemdata.id
						});
					}
				});
				addClick({
					id: itemdata.id
				});
			}
			//处于APP端时
			else if (itemdata.userName && loginType === 'app') {
				console.log('itemdata',itemdata);
				uni.showToast({
					title: `正在为您打开游戏，请稍等~`,
					icon: 'none',
				});


				//跳进外部浏览器打开微信小游戏
				/* plus.runtime.openURL(itemdata.gameUrl, function(res) {
					console.log(res);
				}); */

				//跳进内嵌浏览器webview打开微信小游戏
				//对ur行编码
				let encodedUrl = encodeURIComponent(itemdata.gameUrl);
				addClick({
					id: itemdata.id
				});
				uni.navigateTo({
					url: `/pages/webview/webview?src=${encodedUrl}&title=${itemdata.appname}`,
				}).then(res => {
					// console.log('跳转成功', res);
					addOpen({
						id: itemdata.id
					});
				}).catch(err => {
					console.error('跳转失败', err);
				});





				//从微信小程序进入跳进，目前只能跳进首页
				/* this.sweixin.launchMiniProgram({
					id: 'gh_f03eb6ba7bc9', //要跳转小程序的原始ID
					// path: `pages/tslogin/tslogin?do=login&appName=${itemdata.username}`, //  可带参数
					// path: `https://game.weixin.qq.com/cgi-bin/comm/openlink?auth_appid=wx62d9035fd4fd2059&url=https%3A%2F%2Fgame.weixin.qq.com%2Fcgi-bin%2Fminigame%2Fstatic%2Fcps-transfer%2Findex.html%3Ft%3DAARwtQwFAAABAAAAAACb5dZ3Bq27t3udXwPJZxAAAADA8RG5WEKQmoqKviNESI_t_xpcTGNZbOvZhGLbF_si_gri_9qdvru4eA8jre-QDluA9gJxhZESxT4o%26wechat_pkgid%3Dminigame__cps_transfer_index`, //  可带参数
					success: (res) => {
						console.log('跳转成功', res);
					},
					fail: (err) => {
						console.error('跳转失败', err);
					}
				})
				 */

			}

			else {
				uni.showToast({
					title: `尊敬的大人对对不不起起！此游戏出了点小问题~`,
					icon: 'none'
				});
			}
		},

		goToForum(e) {
			let data = e.currentTarget.dataset.data;
			uni.setStorageSync('forumType', data);
			uni.navigateTo({
				url: '/pages/forum1/forum1'
			});
		},

		goToForumDetail(e) {
			let data = e.currentTarget.dataset.data;
			uni.setStorageSync('forumDetail', JSON.stringify(data));
			uni.navigateTo({
				url: '/pages/forumDetail/forumDetail'
			});
		},

		goToAll(e) {
			let data = e.currentTarget.dataset.data;
			if (data == '1') {
				uni.navigateTo({
					url: '/pages/myGame/myGame'
				});
			}
			if (data == '2') {
				uni.setStorageSync('tabIndex', 1);
				uni.setStorageSync('tab2Index', 2);
				uni.switchTab({
					url: '/pages/type/type'
				});
			}
			if (data == '3') {
				uni.setStorageSync('tabIndex', 1);
				uni.setStorageSync('tab2Index', 0);
				uni.switchTab({
					url: '/pages/type/type'
				});
			}
		},

		//登录提示框确认事件
		handleLoginConfirm() {
			uni.navigateTo({
				// 跳进登录页面
				url: '/pages/login/login'
			});
		},
		//登录提示框取消事件
		handleLoginCancel() {
			this.showLoginConfirm = false;
		}
	}
};
</script>
<style>
.h1 {
	height: inherit;
	padding: 30rpx;
}

.h2 {
	width: 100%;
	position: relative;
	height: 320rpx;
	border-radius: 30rpx;
	display: flex;
	animation: swiperSwitch 25s infinite;
}

.h3 {
	min-width: calc(100% - 40rpx);
	height: 100%;
	opacity: 1;
	border-radius: 30rpx;
	animation: swiperSwitch2 5s infinite;
	padding: 0 20rpx;
}

@keyframes swiperSwitch {
	0% {
		transform: translate(0, 0px);
	}

	1%,
	19% {
		transform: translate(-100%, 0px);
	}

	21%,
	39% {
		transform: translate(-100%, 0px);
	}

	41%,
	59% {
		transform: translate(-200%, 0px);
	}

	61%,
	79% {
		transform: translate(-200%, 0px);
	}

	81%,
	99% {
		transform: translate(-300%, 0px);
	}
}

.h4 {
	width: 100%;
	height: 100%;
	position: relative;
}

.h5 {
	width: 100%;
	height: 100%;
	border-radius: 30rpx;
}

.h6 {
	position: absolute;
	bottom: 0;
	display: flex;
	color: white;
	justify-content: space-between;
	align-items: flex-end;
	width: inherit;
	background: linear-gradient(to bottom, #ffffff00 0%, #44434361 50%, #44434361 50%, #000000ad 100%);
	height: 100%;
	border-radius: 30rpx;
}

.h7 {
	padding-left: 30rpx;
	padding-bottom: 30rpx;
}

.h8 {
	font-weight: 600;
	font-size: 30rpx;
	padding-bottom: 20rpx;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.h9 {
	font-size: 26rpx;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.h10 {
	margin-right: 30rpx;
	margin-bottom: 30rpx;
	word-break: keep-all;
	margin-left: 30rpx;
	background: rgb(255 255 255 / 38%);
	padding: 12rpx 22rpx;
	border-radius: 100rpx;
}

.h11 {
	display: flex;
	justify-content: space-between;
	margin-top: 35rpx;
	margin-bottom: 20rpx;
}

.h12 {
	font-weight: 700;
	font-size: 36rpx;
	color: #000000;
	line-height: 56rpx;
}

.h13 {
	font-size: 28rpx;
	color: #f99315;
	line-height: 48rpx;
}

.h14 {
	background: white;
	border-radius: 30rpx;
}

.h15 {
	display: flex;
	align-items: baseline;
	padding: 30rpx;
	overflow-y: auto;
}

.h16 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 19%;
	margin-right: 10rpx;
}

.h16:last-child {
	margin-right: 0;
}

.h17 {
	width: 100rpx;
	height: 100rpx;
	border-radius: 25rpx;
}

.h18 {
	text-align: center;
	font-size: 25rpx;
	width: 120rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-top: 10rpx;
}

.h19 {
	overflow-x: auto;
	display: flex;
	flex-wrap: nowrap;
}

.h20 {
	background: white;
	margin-right: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx 25rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.h21 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.h22 {
	height: 50rpx;
	background: rgba(var(--Gred), var(--Ggreen), var(--Gblue), 0.15);
	text-align: center;
	line-height: 50rpx;
	padding: 5rpx 35rpx;
	border-radius: 100rpx;
	font-size: 26rpx;
	color: var(--Color);
	font-weight: bold;
	margin-top: 20rpx;
}

.h23 {
	display: flex;
	flex-wrap: wrap;
}

.h24 {
	background: white;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	padding: 15rpx 25rpx;
	display: flex;
	align-items: center;
	width: 100%;
	padding-right: 5rpx;
}

.h25 {
	margin-left: 20rpx;
}

.h26 {
	font-size: 32rpx;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.h27 {
	color: gray;
	font-size: 22rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-top: 10rpx;
}

.sqi1 {
	display: flex;
	margin: 0 30rpx;
	margin-top: 15px;
	padding: 20rpx 0;
}

.sqi2 {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sqi3 {
	width: 75rpx;
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30rpx;
}

.sqi3-1 {
	background: linear-gradient(150deg, #ffe22f, #faa519);
}

.sqi3-2 {
	background: linear-gradient(150deg, #76eeca, #29d6ab);
}

.sqi3-3 {
	background: linear-gradient(150deg, #d5b1e5, #8e6efa);
}

.sqi3-4 {
	background: linear-gradient(150deg, #ff94b9, #f7446a);
}

.sqi4 {
	width: 50rpx;
	height: 50rpx;
}

.sqi5 {
	margin-top: 15rpx;
}

.qz1 {
	display: flex;
	flex-direction: column;
	padding: 25rpx;
	border-radius: 25rpx;
	background: white;
	margin-bottom: 30rpx;
}

.qz2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.qz3 {
	display: flex;
	flex: 1;
}

.qz4 {
	width: 85rpx;
	height: 85rpx;
	border-radius: 100%;
}

.qz5 {
	width: 100%;
	height: 100%;
	border-radius: 100%;
}

.qz6 {
	display: flex;
	flex-direction: column;
	margin-left: 25rpx;
	justify-content: space-around;
}

.qz7 {
	font-weight: blod;
	font-size: 30rpx;
}

.qz8 {
	display: flex;
	font-size: 24rpx;
	color: gray;
}

.qz9 {
	margin-right: 5rpx;
}

.qz10 {
	margin-left: 30rpx;
	color: var(--Color);
}

.qz11 {
	width: 40rpx;
	height: 40rpx;
}

.qz11>image {
	width: 100%;
	height: 100%;
}

.qz12 {
	font-size: 32rpx;
	font-weight: bold;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 20rpx 0;
}

.qz13 {
	font-size: 27rpx;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 15rpx;
}

.qz14 {
	display: flex;
	gap: 20rpx;
	padding: 10rpx 0;
	flex-wrap: wrap;
}

.qz15 {
	width: 200rpx;
	height: 200rpx;
	object-fit: cover;
	border-radius: 15rpx;
	background: #f5f5f5;
}

.qz15>image {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.qz16 {
	display: flex;
	align-items: center;
	margin-top: 25rpx;
}

.qz17 {
	color: gray;
	font-size: 25rpx;
}

.qz18 {
	margin-left: 25rpx;
	font-size: 23rpx;
	border: 2rpx solid var(--LColor50);
	padding: 7rpx 15rpx;
	border-radius: 30rpx;
	color: var(--Color);
	background: var(--LColor20);
}

.qz19 {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	padding-bottom: 5rpx;
}

.qz20 {
	display: flex;
	align-items: flex-end;
}

.qz21 {
	display: flex;
}

.qz22 {
	width: 30rpx;
	height: 30rpx;
}

.qz23 {
	color: gray;
	font-size: 25rpx;
	margin-left: 15rpx;
}
</style>